<script setup>
import { onMounted, ref } from 'vue'
import {  Share } from "@element-plus/icons-vue";
import { useRoute,useRouter } from 'vue-router';
import axios from 'axios';

const route = useRoute()
const router = useRouter() 
const recommendList = ref([])

// 获取列表
onMounted(async() => {
  let type = route.query.type
  console.log('从路由中获取到type=====', type);
  // 接口请求
  // let res = await axios.get('http://127.0.0.1:3000/api/classify?type=' + type)
  recommendList.value = [
    {id:1,name:'xiaoming',title:'来验证下苹果的神奇功效',path:'/index/recommend',count:200,image:'	https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQFAh_XeIAKli9PtOldvm0iTWEdIyEdchppGR22elZ-WhZoqDtinfETB5LZXA&s'},
    {id:5,name:'效力',title:'这样选手机这样选手机这样选手机这样选手机这样选手机这样选手机',path:'/index/movie',count:9,image:'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSdrTGdthq04JJYsamnurvOCAH4RBIW66b57YZ54EPvj96Jkas41kD1gK7Tfw&s'},
    {id:8,name:'效力',title:'这样选手机这样选手机这样选手机这样选手机这样选手机这样选手机',path:'/index/movie',count:9,image:'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRBZfygCPUp5gOz09EYUWInlthlWGfg3cYY_w&s'},
    {id:3,name:'小康',title:'开票',path:'/index/food',count:90,image: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR5ItFYbbqdmWSl3-_dN04kJmQ8uf2D1KNMdgoSniZRnlVOBGCFMCPVTGweiQ&s'},
    {id:2,name:'消防',title:'是什么体验',path:'/index/dressing',count:100,image:'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSWNZETkg3KFw2LmK87vB1q772QkJacy5zjboIuM_xrQ5lBHUpDCpU2XVb59w&s'},
    {id:4,name:'xiaoming',title:'来验证下苹果的神奇功效',path:'/index/recommend',count:200,image:'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRXF0Ux7Kj1zbLPt6mozzrZ_pFgKdr4XzYwCg&s'},
    {id:7,name:'小康',title:'开票',path:'/index/food',count:90,image: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcStXISyEVCEZ7aOdkl0VTRmfFkEC_OnnsWjjA&s'},
  ]
})
// 点击事件
function toDetail(params) {
  router.push({
    path: '/detail',
    query: {
      id: params.id
    }
  })
}
</script>

<template>
  <div class="container">
    <ul class="ul">
      <li 
        class="li" 
        v-for="(item, index) in recommendList"
        :key="item.id"
        @click="toDetail(item)"
      >
        <div class="image">
          <img :src="item.image" alt=""/>
        </div>
        
        <div class="title">{{ item.title }}</div>
        <div class="bottom">
          <div>
            {{ item.name }}
          </div>
          <div class="countWrapper">
            <el-icon><Share /></el-icon>
            <span>{{ item.count }}</span>
          </div>
        </div>
      </li>
    </ul>
  </div> 
</template>

<style scoped>
.container{
  overflow-y: auto;
  height: calc(100vh - 200px);
  margin-top: 20px;
}
.ul{
  width: 100%;
  margin: auto;
  /* 瀑布流式布局 */
  column-count: 2;
  /* 间距 */
  column-gap: 10px;
}
.li{
  background-color: #fff;
  margin-bottom: 10px;
  /* 列里面的项不折断 */
  break-inside: avoid;
}
.image img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 10px;
}
.title{
  font-weight: bold;
  font-size: 16px;
  margin: 5px 10px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.bottom {
  margin: 5px 10px 10px 10px;
  display: flex;
  justify-content: space-between;
}
.countWrapper{
  display: flex;
  align-items: center;
  >i{
    margin-right: 4px;
  }
}
</style>